<script setup>
import { usePlayerStore } from '../stores/player'
import { ref } from 'vue'
import { useMessage } from 'naive-ui'
import { Help, HeartOutline, SettingsOutline } from '@vicons/ionicons5'

const playerStore = usePlayerStore()
const message = useMessage()

// 抽卡类型
const gachaType = ref('all') // 'equipment'、'pet' 或 'all'
// 抽卡动画状态
const isShaking = ref(false)
const isOpening = ref(false)
const showResult = ref(false)
const gachaResult = ref(null)
const showProbabilityInfo = ref(false)
const isDrawing = ref(false)

// 结果弹窗相关
const currentPage = ref(1)
const pageSize = ref(12)
const selectedQuality = ref('all') // 选中的装备品质
const selectedRarity = ref('all') // 选中的灵宠品质
const autoReleasedCount = ref(0) // 自动放生灵宠次数
const autoSoldIncome = ref(0) // 自动出售装备获得的强化石数量
const autoSoldCount = ref(0) // 自动出售装备的数量
const showAutoSettings = ref(false) // 自动设置开关
const showWishlistSettings = ref(false) // 心愿单弹窗

// 心愿单概率提升配置
const wishlistBonus = {
  equipment: (quality) => Math.min(1.0, 0.2 / getEquipProbabilities[quality]),
  pet: (rarity) => Math.min(1.0, 0.2 / petRarities[rarity].probability)
}

// 装备品质
const equipmentQualities = {
  common: { name: '凡品', color: '#9e9e9e', statMod: 1.0, maxStatMod: 1.5 },
  uncommon: { name: '下品', color: '#4caf50', statMod: 1.2, maxStatMod: 2.0 },
  rare: { name: '中品', color: '#2196f3', statMod: 1.5, maxStatMod: 2.5 },
  epic: { name: '上品', color: '#9c27b0', statMod: 2.0, maxStatMod: 3.0 },
  legendary: { name: '极品', color: '#ff9800', statMod: 2.5, maxStatMod: 3.5 },
  mythic: { name: '仙品', color: '#e91e63', statMod: 3.0, maxStatMod: 4.0 }
}

// 装备类型
const equipmentTypes = {
  weapon: { name: '武器', slot: 'weapon', prefixes: ['九天', '太虚', '混沌', '玄天', '紫霄', '青冥', '赤炎', '幽冥'] },
  head: { name: '头部', slot: 'head', prefixes: ['天灵', '玄冥', '紫金', '青玉', '赤霞', '幽月', '星辰', '云霄'] },
  body: { name: '衣服', slot: 'body', prefixes: ['九霄', '太素', '混元', '玄阳', '紫薇', '青龙', '赤凤', '幽冥'] },
  legs: { name: '裤子', slot: 'legs', prefixes: ['天罡', '玄武', '紫电', '青云', '赤阳', '幽灵', '星光', '云雾'] },
  feet: { name: '鞋子', slot: 'feet', prefixes: ['天行', '玄风', '紫霞', '青莲', '赤焰', '幽影', '星步', '云踪'] },
  shoulder: { name: '肩甲', slot: 'shoulder', prefixes: ['天护', '玄甲', '紫雷', '青锋', '赤羽', '幽岚', '星芒', '云甲'] },
  hands: { name: '手套', slot: 'hands', prefixes: ['天罗', '玄玉', '紫晶', '青钢', '赤金', '幽银', '星铁', '云纹'] },
  wrist: { name: '护腕', slot: 'wrist', prefixes: ['天绝', '玄铁', '紫玉', '青石', '赤铜', '幽钢', '星晶', '云纱'] },
  necklace: { name: '项链', slot: 'necklace', prefixes: ['天珠', '玄圣', '紫灵', '青魂', '赤心', '幽魄', '星魂', '云珠'] },
  ring1: { name: '戒指1', slot: 'ring1', prefixes: ['天命', '玄命', '紫命', '青命', '赤命', '幽命', '星命', '云命'] },
  ring2: { name: '戒指2', slot: 'ring2', prefixes: ['天道', '玄道', '紫道', '青道', '赤道', '幽道', '星道', '云道'] },
  belt: { name: '腰带', slot: 'belt', prefixes: ['天系', '玄系', '紫系', '青系', '赤系', '幽系', '星系', '云系'] },
  artifact: { name: '法宝', slot: 'artifact', prefixes: ['天宝', '玄宝', '紫宝', '青宝', '赤宝', '幽宝', '星宝', '云宝'] }
}

const equipmentTypes2 = [
  'weapon',
  'head',
  'body',
  'legs',
  'feet',
  'shoulder',
  'hands',
  'wrist',
  'necklace',
  'ring1',
  'ring2',
  'belt',
  'artifact'
]

// 生成随机装备
const generateEquipment = (level, type = null, quality = null) => {
  // 随机选择装备类型
  if (!type) {
    const types = Object.keys(equipmentTypes)
    type = types[Math.floor(Math.random() * types.length)]
  }
  // 随机选择品质，使用固定概率
  if (!quality) {
    const roll = Math.random()
    if (roll < 0.35) quality = 'common'
    else if (roll < 0.65) quality = 'uncommon'
    else if (roll < 0.82) quality = 'rare'
    else if (roll < 0.93) quality = 'epic'
    else if (roll < 0.98) quality = 'legendary'
    else quality = 'mythic'
  }
  // 随机生成装备等级（1到玩家当前等级之间）
  const randomLevel = Math.floor(Math.random() * level) + 1
  // 基础属性计算
  const baseStats = {}
  const qualityMod = equipmentQualities[quality].statMod
  const levelMod = 1 + (randomLevel * 0.1)
  Object.entries(equipmentBaseStats[type]).forEach(([stat, config]) => {
    const base = config.min + Math.random() * (config.max - config.min)
    const value = base * qualityMod * levelMod
    // 对百分比属性进行特殊处理
    if (['critRate', 'critDamageBoost', 'dodgeRate', 'vampireRate', 'finalDamageBoost', 'finalDamageReduce'].includes(stat)) {
      baseStats[stat] = Math.round(value * 1) / 100 // 保留两位小数
    } else {
      baseStats[stat] = Math.round(value)
    }
  })
  return {
    id: Date.now() + Math.random(),
    name: generateEquipmentName(type, quality),
    type,  // 确保设置正确的type属性
    slot: type,  // 添加slot属性，用于装备系统
    quality,
    level: randomLevel,
    requiredRealm: randomLevel,
    stats: baseStats,
    equipType: type,
    qualityInfo: equipmentQualities[quality]
  }
}
// 生成装备名称
const generateEquipmentName = (type, quality) => {
  const typeInfo = equipmentTypes[type]
  const prefix = typeInfo.prefixes[Math.floor(Math.random() * typeInfo.prefixes.length)]
  const suffixes = ['', '·真', '·极', '·道', '·天', '·仙', '·圣', '·神']
  const suffix = quality === 'mythic' ? suffixes[7] :
    quality === 'legendary' ? suffixes[6] :
      quality === 'epic' ? suffixes[5] :
        quality === 'rare' ? suffixes[4] :
          quality === 'uncommon' ? suffixes[3] :
            suffixes[0]
  return `${prefix}${typeInfo.name}${suffix}`
}

// 装备基础属性
const equipmentBaseStats = {
  weapon: {
    attack: { name: '攻击', min: 10, max: 20 },
    critRate: { name: '暴击率', min: 0.05, max: 0.1 },
    critDamageBoost: { name: '暴击伤害', min: 0.1, max: 0.3 }
  },
  head: {
    defense: { name: '防御', min: 5, max: 10 },
    health: { name: '生命', min: 50, max: 100 },
    stunResist: { name: '抗眩晕', min: 0.05, max: 0.1 }
  },
  body: {
    defense: { name: '防御', min: 8, max: 15 },
    health: { name: '生命', min: 80, max: 150 },
    finalDamageReduce: { name: '最终减伤', min: 0.05, max: 0.1 }
  },
  legs: {
    defense: { name: '防御', min: 6, max: 12 },
    speed: { name: '速度', min: 5, max: 10 },
    dodgeRate: { name: '闪避率', min: 0.05, max: 0.1 }
  },
  feet: {
    defense: { name: '防御', min: 4, max: 8 },
    speed: { name: '速度', min: 8, max: 15 },
    dodgeRate: { name: '闪避率', min: 0.05, max: 0.1 }
  },
  shoulder: {
    defense: { name: '防御', min: 5, max: 10 },
    health: { name: '生命', min: 40, max: 80 },
    counterRate: { name: '反击率', min: 0.05, max: 0.1 }
  },
  hands: {
    attack: { name: '攻击', min: 5, max: 10 },
    critRate: { name: '暴击率', min: 0.03, max: 0.08 },
    comboRate: { name: '连击率', min: 0.05, max: 0.1 }
  },
  wrist: {
    defense: { name: '防御', min: 3, max: 8 },
    counterRate: { name: '反击率', min: 0.05, max: 0.1 },
    vampireRate: { name: '吸血率', min: 0.05, max: 0.1 }
  },
  necklace: {
    health: { name: '生命', min: 60, max: 120 },
    healBoost: { name: '强化治疗', min: 0.1, max: 0.2 },
    spiritRate: { name: '灵力获取', min: 0.1, max: 0.2 }
  },
  ring1: {
    attack: { name: '攻击', min: 5, max: 10 },
    critDamageBoost: { name: '暴击伤害', min: 0.1, max: 0.2 },
    finalDamageBoost: { name: '最终增伤', min: 0.05, max: 0.1 }
  },
  ring2: {
    defense: { name: '防御', min: 5, max: 10 },
    critDamageReduce: { name: '爆伤减免', min: 0.1, max: 0.2 },
    resistanceBoost: { name: '抗性提升', min: 0.05, max: 0.1 }
  },
  belt: {
    health: { name: '生命', min: 40, max: 80 },
    defense: { name: '防御', min: 4, max: 8 },
    combatBoost: { name: '战斗属性', min: 0.05, max: 0.1 }
  },
  artifact: {
    attack: { name: '攻击力', min: 0.1, max: 0.3 },
    critRate: { name: '暴击率', min: 0.1, max: 0.3 },
    comboRate: { name: '连击率', min: 0.1, max: 0.3 }
  }
}

// 灵宠品质配置
const petRarities = {
  divine: {
    name: '神品',
    color: '#FF0000',
    probability: 0.002,
    essenceBonus: 50
  },
  celestial: {
    name: '仙品',
    color: '#FFD700',
    probability: 0.0581,
    essenceBonus: 30
  },
  mystic: {
    name: '玄品',
    color: '#9932CC',
    probability: 0.1601,
    essenceBonus: 20
  },
  spiritual: {
    name: '灵品',
    color: '#1E90FF',
    probability: 0.2801,
    essenceBonus: 10
  },
  mortal: {
    name: '凡品',
    color: '#32CD32',
    probability: 0.4997,
    essenceBonus: 5
  }
}

// 灵宠池配置
const petPool = {
  divine: [
    { name: '玄武', description: '北方守护神兽' },
    { name: '白虎', description: '西方守护神兽' },
    { name: '朱雀', description: '南方守护神兽' },
    { name: '青龙', description: '东方守护神兽' },
    { name: '应龙', description: '上古神龙，掌控风雨' },
    { name: '麒麟', description: '祥瑞之兽，通晓万物' },
    { name: '饕餮', description: '贪婪之兽，吞噬万物，象征无尽的欲望' },
    { name: '穷奇', description: '邪恶之兽，背信弃义，象征混乱与背叛' },
    { name: '梼杌', description: '凶暴之兽，顽固不化，象征无法驯服的野性' },
    { name: '混沌', description: '无序之兽，无形无相，象征原始的混乱' }
  ],
  celestial: [
    { name: '囚牛', description: '龙之长子，喜好音乐，常立于琴头' },
    { name: '睚眦', description: '龙之次子，性格刚烈，嗜杀好斗，常刻于刀剑之上' },
    { name: '嘲风', description: '龙之三子，形似兽，喜好冒险，常立于殿角' },
    { name: '蒲牢', description: '龙之四子，形似龙而小，性好鸣，常铸于钟上' },
    { name: '狻犴', description: '龙之五子，形似狮子，喜静好坐，常立于香炉' },
    { name: '霸下', description: '龙之六子，形似龟，力大无穷，常背负石碑' },
    { name: '狴犴', description: '龙之七子，形似虎，明辨是非，常立于狱门' },
    { name: '负屃', description: '龙之八子，形似龙，雅好诗文，常盘于碑顶' },
    { name: '螭吻', description: '龙之九子，形似鱼，能吞火，常立于屋脊' }
  ],
  mystic: [
    { name: '火凤凰', description: '浴火重生的永恒之鸟' },
    { name: '雷鹰', description: '雷电的猛禽' },
    { name: '冰狼', description: '冰原霸主' },
    { name: '岩龟', description: '坚不可摧的守护者' }
  ],
  spiritual: [
    { name: '玄龟', description: '擅长防御的水系灵宠' },
    { name: '风隼', description: '速度极快的飞行灵宠' },
    { name: '地甲', description: '坚固的大地守护者' },
    { name: '云豹', description: '敏捷的猎手' }
  ],
  mortal: [
    { name: '灵猫', description: '敏捷的小型灵宠' },
    { name: '幻蝶', description: '美丽的蝴蝶灵宠' },
    { name: '火鼠', description: '活泼的啮齿类灵宠' },
    { name: '草兔', description: '温顺的兔类灵宠' }
  ]
}

const getRarityMultiplier = (rarity) => {
  const multipliers = {
    divine: { base: 5, percent: 2 },
    celestial: { base: 4, percent: 1.8 },
    mystic: { base: 3, percent: 1.6 },
    spiritual: { base: 2, percent: 1.4 },
    mortal: { base: 1, percent: 1 }
  }
  return multipliers[rarity] || multipliers.mortal
}

const generateRandomValue = (min, max, isPercentage = false) => {
  const value = min + Math.random() * (max - min)
  return isPercentage ? Math.min(1, Math.round(value * 100) / 100) : Math.round(value)
}

const combatAttributes = (rarity) => {
  const multiplier = getRarityMultiplier(rarity)
  // 基础属性配置
  const baseStats = {
    // 基础属性
    attack: { min: 10, max: 15, useBase: true },
    health: { min: 100, max: 120, useBase: true },
    defense: { min: 5, max: 8, useBase: true },
    speed: { min: 10, max: 15, useBase: true, multiplier: 0.6 },
    // 战斗属性
    critRate: { min: 0.05, max: 0.1, isPercentage: true }, // 暴击率
    comboRate: { min: 0.05, max: 0.1, isPercentage: true }, // 连击率
    counterRate: { min: 0.05, max: 0.1, isPercentage: true }, // 反击率
    stunRate: { min: 0.05, max: 0.1, isPercentage: true }, // 眩晕率
    dodgeRate: { min: 0.05, max: 0.1, isPercentage: true }, // 闪避率
    vampireRate: { min: 0.05, max: 0.1, isPercentage: true }, // 吸血率
    // 战斗抗性
    critResist: { min: 0.05, max: 0.1, isPercentage: true }, // 抗暴击
    comboResist: { min: 0.05, max: 0.1, isPercentage: true }, // 抗连击
    counterResist: { min: 0.05, max: 0.1, isPercentage: true }, // 抗反击
    stunResist: { min: 0.05, max: 0.1, isPercentage: true }, // 抗眩晕
    dodgeResist: { min: 0.05, max: 0.1, isPercentage: true }, // 抗闪避
    vampireResist: { min: 0.05, max: 0.1, isPercentage: true }, // 抗吸血
    // 特殊属性
    healBoost: { min: 0.05, max: 0.1, isPercentage: true }, // 强化治疗
    critDamageBoost: { min: 0.05, max: 0.1, isPercentage: true }, // 强化爆伤
    critDamageReduce: { min: 0.05, max: 0.1, isPercentage: true }, // 弱化爆伤
    finalDamageBoost: { min: 0.05, max: 0.1, isPercentage: true }, // 最终增伤
    finalDamageReduce: { min: 0.05, max: 0.1, isPercentage: true }, // 最终减伤
    combatBoost: { min: 0.05, max: 0.1, isPercentage: true }, // 战斗属性提升
    resistanceBoost: { min: 0.05, max: 0.1, isPercentage: true } // 战斗抗性提升
  }
  const attributes = {}
  // 计算每个属性的值
  Object.entries(baseStats).forEach(([key, config]) => {
    if (config.isPercentage) {
      // 百分比属性使用percent倍率
      attributes[key] = generateRandomValue(
        config.min * multiplier.percent,
        config.max * multiplier.percent,
        true
      )
    } else {
      // 基础属性使用base倍率
      const baseMultiplier = config.useBase ? multiplier.base : multiplier.percent
      const finalMultiplier = config.multiplier ? baseMultiplier * config.multiplier : baseMultiplier
      attributes[key] = generateRandomValue(
        config.min * finalMultiplier,
        config.max * finalMultiplier
      )
    }
  })
  return attributes
}

// 根据境界调整装备品质概率
const getEquipProbabilities = {
  common: 0.50, // 凡品 50%
  uncommon: 0.30, // 下品 30%
  rare: 0.12, // 中品 12%
  epic: 0.05, // 上品 5%
  legendary: 0.02, // 极品 2%
  mythic: 0.01 // 仙品 1%
}

// 根据心愿单调整装备概率
const getAdjustedEquipProbabilities = () => {
  const baseProbs = { ...getEquipProbabilities }
  if (playerStore.wishlistEnabled && playerStore.selectedWishEquipQuality) {
    const quality = playerStore.selectedWishEquipQuality
    const bonus = wishlistBonus.equipment(quality)
    // 增加选中品质的概率
    baseProbs[quality] *= (1 + bonus)
    // 按比例降低其他品质的概率
    const totalOtherProb = Object.entries(baseProbs)
      .filter(([q]) => q !== quality)
      .reduce((sum, [, prob]) => sum + prob, 0)
    const reductionFactor = (1 - baseProbs[quality]) / totalOtherProb
    Object.keys(baseProbs).forEach(q => {
      if (q !== quality) {
        baseProbs[q] *= reductionFactor
      }
    })
  }
  return baseProbs
}

// 根据心愿单调整灵宠概率
const getAdjustedPetProbabilities = () => {
  const baseProbs = {}
  Object.entries(petRarities).forEach(([rarity, config]) => {
    baseProbs[rarity] = config.probability
  })

  if (playerStore.wishlistEnabled && playerStore.selectedWishPetRarity) {
    const rarity = playerStore.selectedWishPetRarity
    const bonus = wishlistBonus.pet(rarity)
    // 增加选中品质的概率
    baseProbs[rarity] *= (1 + bonus)
    // 按比例降低其他品质的概率
    const totalOtherProb = Object.entries(baseProbs)
      .filter(([r]) => r !== rarity)
      .reduce((sum, [, prob]) => sum + prob, 0)
    const reductionFactor = (1 - baseProbs[rarity]) / totalOtherProb
    Object.keys(baseProbs).forEach(r => {
      if (r !== rarity) {
        baseProbs[r] *= reductionFactor
      }
    })
  }
  return baseProbs
}

// 修改抽取单个装备的函数
const drawSingleEquip = () => {
  const random = Math.random()
  let accumulatedProb = 0
  const currentProbs = getAdjustedEquipProbabilities()
  for (const [quality, probability] of Object.entries(currentProbs)) {
    accumulatedProb += probability
    if (random <= accumulatedProb) {
      const types = Object.keys(equipmentTypes)
      const type = types[Math.floor(Math.random() * types.length)]
      return generateEquipment(playerStore.level || 1, type, quality)
    }
  }
  return generateEquipment(playerStore.level || 1, null, 'common')
}

// 修改抽取单个灵宠的函数
const drawSinglePet = () => {
  const random = Math.random()
  let accumulatedProb = 0
  const currentProbs = getAdjustedPetProbabilities()
  for (const [rarity, probability] of Object.entries(currentProbs)) {
    accumulatedProb += probability
    if (random <= accumulatedProb) {
      const pool = petPool[rarity]
      const pet = pool[Math.floor(Math.random() * pool.length)]
      const upgradeItemCount = {
        divine: 5,
        celestial: 4,
        mystic: 3,
        spiritual: 2,
        mortal: 1
      }
      return {
        ...pet,
        rarity,
        type: 'pet',
        quality: {
          strength: Math.floor(Math.random() * 10) + 1,
          agility: Math.floor(Math.random() * 10) + 1,
          intelligence: Math.floor(Math.random() * 10) + 1,
          constitution: Math.floor(Math.random() * 10) + 1
        },
        power: 0,
        experience: 0,
        maxExperience: 100,
        level: 1,
        star: 0,
        upgradeItems: upgradeItemCount[rarity] || 1,
        combatAttributes: combatAttributes(rarity),
      }
    }
  }
  return null
}

// 综合池概率配置
const getAllPoolProbabilities = () => {
  const equipProbs = getEquipProbabilities
  const totalEquipProb = 0.5 // 装备占50%概率
  const totalPetProb = 0.5 // 灵宠占50%概率
  // 调整装备概率
  const adjustedEquipProbs = {}
  Object.entries(equipProbs).forEach(([quality, prob]) => {
    adjustedEquipProbs[quality] = prob * totalEquipProb
  })
  // 调整灵宠概率
  const adjustedPetProbs = {}
  Object.entries(petRarities).forEach(([rarity, config]) => {
    adjustedPetProbs[rarity] = config.probability * totalPetProb
  })
  return {
    equipment: adjustedEquipProbs,
    pet: adjustedPetProbs
  }
}

// 从综合池抽取
const drawFromAllPool = () => {
  const random = Math.random()
  const probs = getAllPoolProbabilities(playerStore.level || 1)
  // 先决定是抽装备还是灵宠
  if (random < 0.5) {
    // 抽装备
    let accumulatedProb = 0
    for (const [quality, probability] of Object.entries(probs.equipment)) {
      accumulatedProb += probability
      if (random * 2 <= accumulatedProb) {
        const types = Object.keys(equipmentTypes)
        const type = types[Math.floor(Math.random() * types.length)]
        return {
          ...generateEquipment(playerStore.level || 1, type, quality),
          type,
          equipType: type
        }
      }
    }
    // 如果没有命中任何概率，返回最低品质的装备
    const types = Object.keys(equipmentTypes)
    const type = types[Math.floor(Math.random() * types.length)]
    return {
      ...generateEquipment(playerStore.level || 1, type, 'common'),
      type,
      equipType: type
    }
  } else {
    // 抽灵宠
    let accumulatedProb = 0
    for (const [rarity, config] of Object.entries(petRarities)) {
      accumulatedProb += config.probability
      if ((random - 0.5) * 2 <= accumulatedProb) {
        const pool = petPool[rarity]
        const pet = pool[Math.floor(Math.random() * pool.length)]
        const upgradeItemCount = {
          divine: 5,
          celestial: 4,
          mystic: 3,
          spiritual: 2,
          mortal: 1
        }
        return {
          ...pet,
          rarity,
          type: 'pet',
          quality: {
            strength: Math.floor(Math.random() * 10) + 1,
            agility: Math.floor(Math.random() * 10) + 1,
            intelligence: Math.floor(Math.random() * 10) + 1,
            constitution: Math.floor(Math.random() * 10) + 1
          },
          power: 0,
          experience: 0,
          maxExperience: 100,
          level: 1,
          star: 0,
          upgradeItems: upgradeItemCount[rarity] || 1,
          combatAttributes: combatAttributes(rarity),
        }
      }
    }
    // 如果没有命中任何概率，返回最低品质的灵宠
    const pool = petPool.mortal
    const pet = pool[Math.floor(Math.random() * pool.length)]
    return {
      ...pet,
      rarity: 'mortal',
      type: 'pet',
      quality: {
        strength: Math.floor(Math.random() * 10) + 1,
        agility: Math.floor(Math.random() * 10) + 1,
        intelligence: Math.floor(Math.random() * 10) + 1,
        constitution: Math.floor(Math.random() * 10) + 1
      },
      power: 0,
      experience: 0,
      maxExperience: 100,
      level: 1,
      star: 0,
      upgradeItems: 1,
      combatAttributes: combatAttributes('mortal')
    }
  }
}

const gachaNumber = ref(1)

// 执行抽卡
const performGacha = async (times) => {
  gachaNumber.value = times
  showResult.value = false
  const cost = playerStore.wishlistEnabled ? times * 200 : times * 100
  if (playerStore.spiritStones < cost) {
    message.error('灵石不足！')
    return
  }
  if (gachaType.value != 'equipment' && playerStore.items.filter(item => item.type === 'pet').length >= 100) {
    message.error('灵宠背包已满，请先处理一些灵宠')
    return
  }
  if (isDrawing.value) return
  isDrawing.value = true
  // 扣除灵石
  playerStore.spiritStones -= cost
  // 开始抽卡动画
  isShaking.value = true
  await new Promise(resolve => setTimeout(resolve, 1000))
  isShaking.value = false
  isOpening.value = true
  await new Promise(resolve => setTimeout(resolve, 1000))
  // 生成抽卡结果
  const results = Array(times).fill().map(() => {
    if (gachaType.value === 'all') {
      return drawFromAllPool()
    } else {
      return gachaType.value === 'equipment' ? drawSingleEquip() : drawSinglePet()
    }
  })
  // 添加到背包
  results.forEach(item => {
    if (item.type === 'pet') {
      // 根据品质获得精华
      const rarityConfig = playerStore.petConfig.rarityMap[item.rarity]
      if (rarityConfig) {
        playerStore.petEssence += rarityConfig.essenceBonus
      }
      // 检查是否需要自动放生
      if (playerStore.autoReleaseRarities.length > 0
        && (playerStore.autoReleaseRarities.includes('all')
          || playerStore.autoReleaseRarities.includes(item.rarity))) {
        autoReleasedCount.value++
        return // 不添加到背包
      }
    } else if (equipmentTypes2.includes(item.type)) {
      // 检查是否需要自动出售
      if (playerStore.autoSellQualities.length > 0 &&
        (playerStore.autoSellQualities.includes('all') ||
          playerStore.autoSellQualities.includes(item.quality))) {
        // 计算出售价格
        const qualityPrices = {
          mythic: 6,
          legendary: 5,
          epic: 4,
          rare: 3,
          uncommon: 2,
          common: 1
        }
        const basePrice = qualityPrices[item.quality] || 1
        playerStore.reinforceStones += basePrice
        autoSoldCount.value++
        autoSoldIncome.value += basePrice
        return // 不添加到背包
      }
    }
    playerStore.items.push({
      ...item,
      id: Date.now() + Math.random()
    })
  })
  // 显示自动处理结果通知
  if (autoSoldCount.value) {
    message.success(`自动出售了 ${autoSoldCount.value} 件装备，获得 ${autoSoldIncome.value} 强化石`)
  }
  if (autoReleasedCount.value) {
    message.success(`自动放生了 ${autoReleasedCount.value} 只灵宠`)
  }
  // 保存数据
  playerStore.saveData()
  // 显示结果
  gachaResult.value = results
  currentPage.value = 1
  selectedRarity.value = null
  selectedQuality.value = null
  isOpening.value = false
  showResult.value = true
  isDrawing.value = false
  // 清空自动处理计数器
  autoSoldCount.value = 0
  autoReleasedCount.value = 0
  autoSoldIncome.value = 0
}

// 筛选结果
const filteredResults = computed(() => {
  if (!gachaResult.value) return []
  return gachaResult.value.filter(item => {
    if (item.type === 'pet') {
      return !selectedRarity.value || item.rarity === selectedRarity.value
    }
    // 装备筛选
    return !selectedQuality.value || item.quality === selectedQuality.value
  })
})

// 当筛选条件改变时重置页码
watch([selectedQuality, selectedRarity], () => {
  currentPage.value = 1
})

// 计算当前页的结果
const currentPageResults = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredResults.value.slice(start, end)
})

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(filteredResults.value.length / pageSize.value)
})

const types = {
  equipment: '📦',
  pet: '🥚',
  all: '🎁'
}

const equipmentQualityOptions = computed(() => {
  return Object.entries(equipmentQualities).map(([key, value]) => ({
    label: value.name,
    value: key,
    style: { color: value.color }
  }))
})

const petRarityOptions = computed(() => {
  return Object.entries(petRarities).map(([key, value]) => ({
    label: value.name,
    value: key,
    style: { color: value.color }
  }))
})

const handleAutoSellChange = (values) => {
  if (values.includes('all')) {
    // 如果选中了"全部品阶"，则清空其他选项
    playerStore.autoSellQualities = ['all']
  } else if (values.length > 0) {
    // 如果选中了其他选项，确保移除"全部品阶"
    playerStore.autoSellQualities = values.filter(v => v !== 'all')
  }
}

const handleAutoReleaseChange = (values) => {
  if (values.includes('all')) {
    // 如果选中了"全部品质"，则清空其他选项
    playerStore.autoReleaseRarities = ['all']
  } else if (values.length > 0) {
    // 如果选中了其他选项，确保移除"全部品质"
    playerStore.autoReleaseRarities = values.filter(v => v !== 'all')
  }
}
</script>

<template>
  <n-layout>
    <n-layout-header bordered>
      <n-page-header>
        <template #title>
          抽奖系统
        </template>
      </n-page-header>
    </n-layout-header>
    <n-layout-content class="gacha-content">
      <n-card :bordered="false">
        <div class="gacha-container">
          <div class="gacha-type-selector">
            <n-radio-group v-model:value="gachaType" name="gachaType">
              <n-radio-button value="all">综合池</n-radio-button>
              <n-radio-button value="equipment">装备池</n-radio-button>
              <n-radio-button value="pet">灵宠池</n-radio-button>
            </n-radio-group>
          </div>
          <div class="spirit-stones">
            <n-statistic label="灵石" :value="playerStore.spiritStones" />
          </div>
          <div class="gacha-item-container">
            <div class="gacha-item" :class="{
              'shake': isShaking,
              'open': isOpening
              }">
              {{ types[gachaType] }}
            </div>
          </div>
          <div class="gacha-buttons">
            <n-space vertical>
              <n-space justify="center">
                <n-button type="primary" v-for="(item, index) in [1, 10, 50, 100]" :key="index"
                  @click="performGacha(item)"
                  :disabled="playerStore.spiritStones < (playerStore.wishlistEnabled ? item * 200 : item * 100) || isDrawing">
                  抽{{ item }}次 ({{ playerStore.wishlistEnabled ? item * 200 : item * 100 }}灵石)
                </n-button>
              </n-space>
              <n-space justify="center">
                <n-button quaternary circle size="small" @click="showProbabilityInfo = true">
                  <template #icon>
                    <n-icon>
                      <Help />
                    </n-icon>
                  </template>
                </n-button>
                <n-button quaternary circle size="small" @click="showWishlistSettings = true">
                  <template #icon>
                    <n-icon>
                      <HeartOutline />
                    </n-icon>
                  </template>
                </n-button>
                <n-button quaternary circle size="small" @click="showAutoSettings = true">
                  <template #icon>
                    <n-icon>
                      <SettingsOutline />
                    </n-icon>
                  </template>
                </n-button>
              </n-space>
            </n-space>
          </div>
          <!-- 抽卡结果弹窗 -->
          <n-modal v-model:show="showResult" preset="dialog" title="抽卡结果" :style="{ maxWidth: '90vw', width: '800px' }">
            <n-card :bordered="false">
              <!-- 筛选区域 -->
              <div class="filter-section" v-if="gachaType !== 'all'">
                <n-space align="center" justify="center" :wrap="true" :size="16">
                  <n-select v-model:value="selectedQuality" placeholder="装备品质筛选" clearable
                    :options="equipmentQualityOptions" :style="{ width: '180px' }" @update:value="currentPage = 1"
                    v-if="gachaType === 'equipment'">
                  </n-select>
                  <n-select v-model:value="selectedRarity" placeholder="灵宠品质筛选" clearable :options="petRarityOptions"
                    :style="{ width: '180px' }" @update:value="currentPage = 1" v-if="gachaType === 'pet'">
                  </n-select>
                </n-space>
              </div>
              <n-space justify="center">
                <n-button type="primary" @click="performGacha(gachaNumber)"
                  :disabled="playerStore.spiritStones < (playerStore.wishlistEnabled ? gachaNumber * 200 : gachaNumber * 100) || isDrawing">
                  再抽{{ gachaNumber }}次
                  ({{ playerStore.wishlistEnabled ? gachaNumber * 200 : gachaNumber * 100 }}灵石)
                </n-button>
              </n-space>
              <div class="result-grid">
                <div v-for="item in currentPageResults" :key="item.id"
                  :class="['result-item', { 'wish-bonus': playerStore.wishlistEnabled && ((item.qualityInfo && playerStore.selectedWishEquipQuality === item.quality) || (item.type === 'pet' && playerStore.selectedWishPetRarity === item.rarity)) }]"
                  :style="{
                borderColor: item.qualityInfo ? item.qualityInfo.color : petRarities[item.rarity]?.color || '#CCCCCC'
              }">
                  <h4>{{ item.name }}</h4>
                  <p>品质：{{ item.qualityInfo ? item.qualityInfo.name : (petRarities[item.rarity]?.name || '未知') }}</p>
                  <p v-if="equipmentTypes2.includes(item.type)">类型：{{ equipmentTypes[item.equipType]?.name }}</p>
                  <p v-else-if="item.type === 'pet'">{{ item.description || '暂无描述' }}</p>
                </div>
              </div>
              <template #footer>
                <n-space justify="center">
                  <n-pagination v-model:page="currentPage" :page-slot="6" :page-count="totalPages"
                    :page-size="pageSize" />
                </n-space>
              </template>
            </n-card>
          </n-modal>
          <!-- 概率说明弹窗 -->
          <n-modal v-model:show="showProbabilityInfo" preset="dialog" title="抽卡概率说明">
            <n-tabs type="segment" animated>
              <!-- 综合池概率 -->
              <n-tab-pane name="all" tab="综合池">
                <n-card>
                  <n-space vertical>
                    <n-divider>综合概率</n-divider>
                    <div class="probability-bars">
                      <div class="prob-item">
                        <div class="prob-label">
                          <span>装备</span>
                        </div>
                        <!-- 总体分布 -->
                        <n-progress type="line" :percentage="50" indicator-placement="inside" color="#2080f0"
                          :height="20" :border-radius="4" />
                        <div class="prob-label">
                          <span>灵宠</span>
                        </div>
                        <n-progress type="line" :percentage="50" indicator-placement="inside" color="#f0a020"
                          :height="20" :border-radius="4" />
                      </div>
                    </div>
                    <!-- 装备概率详情 -->
                    <n-divider>装备品质概率</n-divider>
                    <div class="probability-bars">
                      <div v-for="(probability, quality) in getAllPoolProbabilities(playerStore.level || 1).equipment"
                        :key="quality" class="prob-item">
                        <div class="prob-label">
                          <span :style="{ color: equipmentQualities[quality].color }">
                            {{ equipmentQualities[quality].name }}
                          </span>
                        </div>
                        <n-progress type="line" :percentage="probability * 100" indicator-placement="inside"
                          :color="equipmentQualities[quality].color" :height="20" :border-radius="4"
                          :show-indicator="true">
                          <template #indicator>
                            {{ (probability * 100).toFixed(1) }}%
                          </template>
                        </n-progress>
                      </div>
                    </div>
                    <!-- 灵宠概率详情 -->
                    <n-divider>灵宠品质概率</n-divider>
                    <div class="probability-bars">
                      <div v-for="(probability, rarity) in getAllPoolProbabilities(playerStore.level || 1).pet"
                        :key="rarity" class="prob-item">
                        <div class="prob-label">
                          <span :style="{ color: petRarities[rarity].color }">
                            {{ petRarities[rarity].name }}
                          </span>
                        </div>
                        <n-progress type="line" :percentage="probability * 100" :indicator-placement="'inside'"
                          :color="petRarities[rarity].color" :height="20" :border-radius="4" :show-indicator="true">
                          <template #indicator>
                            {{ (probability * 100).toFixed(1) }}%
                          </template>
                        </n-progress>
                      </div>
                    </div>
                  </n-space>
                </n-card>
              </n-tab-pane>
              <!-- 装备池概率 -->
              <n-tab-pane name="equipment" tab="装备池">
                <n-card>
                  <div class="probability-bars">
                    <div v-for="(probability, quality) in getAdjustedEquipProbabilities()" :key="quality"
                      class="prob-item">
                      <div class="prob-label">
                        <span :style="{ color: equipmentQualities[quality].color }">
                          {{ equipmentQualities[quality].name }}
                        </span>
                      </div>
                      <n-progress type="line" :percentage="probability * 100" :indicator-placement="'inside'"
                        :color="equipmentQualities[quality].color" :height="20" :border-radius="4"
                        :class="{ 'wish-bonus': playerStore.wishlistEnabled && playerStore.selectedWishEquipQuality === quality }"
                        :show-indicator="true">
                        <template #indicator>
                          {{ (probability * 100).toFixed(1) }}%
                        </template>
                      </n-progress>
                    </div>
                  </div>
                </n-card>
              </n-tab-pane>
              <!-- 灵宠池概率 -->
              <n-tab-pane name="pet" tab="灵宠池">
                <n-card>
                  <div class="probability-bars">
                    <div v-for="(probability, rarity) in getAdjustedPetProbabilities()" :key="rarity" class="prob-item">
                      <div class="prob-label">
                        <span :style="{ color: petRarities[rarity].color }">
                          {{ petRarities[rarity].name }}
                        </span>
                      </div>
                      <n-progress type="line" :percentage="probability * 100" :indicator-placement="'inside'"
                        :class="{ 'wish-bonus': playerStore.wishlistEnabled && playerStore.selectedWishPetRarity === rarity }"
                        :color="petRarities[rarity].color" :height="20" :border-radius="4" :show-indicator="true">
                        <template #indicator>
                          {{ (probability * 100).toFixed(1) }}%
                        </template>
                      </n-progress>
                    </div>
                  </div>
                </n-card>
              </n-tab-pane>
            </n-tabs>
          </n-modal>
          <!-- 心愿单设置弹窗 -->
          <n-modal v-model:show="showWishlistSettings" preset="dialog" title="心愿单设置" style="width: 800px">
            <n-card :bordered="false">
              <n-space vertical>
                <n-switch v-model:value="playerStore.wishlistEnabled">
                  <template #checked>心愿单已启用</template>
                  <template #unchecked>心愿单已禁用</template>
                </n-switch>
                <n-divider>装备品质心愿</n-divider>
                <n-select v-model:value="playerStore.selectedWishEquipQuality" :options="equipmentQualityOptions"
                  clearable placeholder="选择装备品质" :disabled="!playerStore.wishlistEnabled">
                  <template #option="{ option }">
                    <span :style="{ color: equipmentQualities[option.value].color }">
                      {{ equipmentQualities[option.value].name }}
                      <n-tag v-if="option.value === playerStore.selectedWishEquipQuality" type="success"
                        size="small">已选择</n-tag>
                    </span>
                  </template>
                </n-select>
                <n-divider>灵宠品质心愿</n-divider>
                <n-select v-model:value="playerStore.selectedWishPetRarity" :options="petRarityOptions" clearable
                  placeholder="选择灵宠品质" :disabled="!playerStore.wishlistEnabled">
                  <template #option="{ option }">
                    <span :style="{ color: petRarities[option.value].color }">
                      {{ petRarities[option.value].name }}
                      <n-tag v-if="option.value === playerStore.selectedWishPetRarity" type="success"
                        size="small">已选择</n-tag>
                    </span>
                  </template>
                </n-select>
                <n-alert type="info" title="心愿单说明">
                  启用心愿单后，所需灵石会翻倍, 选中的品质将根据其基础概率获得不同程度的概率提升（基础概率越低，提升越高）。每次只能选择一个装备品质和一个灵宠品质作为心愿。
                </n-alert>
              </n-space>
            </n-card>
          </n-modal>
          <n-modal v-model:show="showAutoSettings" preset="dialog" title="自动处理设置" style="width: 800px">
            <n-card :bordered="false">
              <n-space vertical>
                <n-divider>装备自动出售</n-divider>
                <n-checkbox-group v-model:value="playerStore.autoSellQualities" @update:value="handleAutoSellChange">
                  <n-space wrap>
                    <n-checkbox value="all"
                      :disabled="!!playerStore.autoSellQualities?.length && !playerStore.autoSellQualities.includes('all')">
                      全部品阶
                    </n-checkbox>
                    <n-checkbox v-for="(quality, key) in equipmentQualities" :key="key" :value="key"
                      :disabled="playerStore.autoSellQualities?.includes('all')">
                      <span :style="{ color: quality.color }">{{ quality.name }}</span>
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
                <n-divider>灵宠自动放生</n-divider>
                <n-checkbox-group v-model:value="playerStore.autoReleaseRarities"
                  @update:value="handleAutoReleaseChange">
                  <n-space wrap>
                    <n-checkbox value="all"
                      :disabled="!!playerStore.autoReleaseRarities?.length && !playerStore.autoReleaseRarities.includes('all')">
                      全部品质
                    </n-checkbox>
                    <n-checkbox v-for="(rarity, key) in petRarities" :key="key" :value="key"
                      :disabled="playerStore.autoReleaseRarities?.includes('all')">
                      <span :style="{ color: rarity.color }">{{ rarity.name }}</span>
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-space>
            </n-card>
            <template #footer>
              <n-space justify="end">
                <n-button @click="showAutoSettings = false">关闭</n-button>
              </n-space>
            </template>
          </n-modal>
        </div>
      </n-card>
    </n-layout-content>
  </n-layout>
</template>

<style scoped>
.gacha-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.gacha-type-selector {
  margin-bottom: 20px;
}

.spirit-stones {
  align-self: flex-end;
}

.gacha-item-container {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gacha-item {
  font-size: 100px;
  transition: transform 0.3s ease;
}

.gacha-item.shake {
  animation: shake 0.5s ease-in-out infinite;
}

.gacha-item.open {
  animation: open 1s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
  }
}

@keyframes open {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.filter-section {
  padding: 16px;
  margin-bottom: 16px;
  background-color: var(--n-card-color);
  border-radius: 8px;
  border: 1px solid var(--n-border-color);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.result-item {
  background: var(--n-color);
  border: 2px solid;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.result-item h4 {
  margin: 0 0 8px 0;
}

.result-item p {
  margin: 4px 0;
  font-size: 0.9em;
}

.gacha-buttons {
  margin-top: 20px;
}

.probability-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prob-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prob-label {
  min-width: 60px;
  text-align: right;
}

@media screen and (max-width: 768px) {
  .result-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.wishlist-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.wishlist-info {
  margin-top: 16px;
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.wishlist-info ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

.wishlist-info li {
  margin: 4px 0;
  color: #666;
}

@keyframes rotate-stars {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wish-bonus {
  position: relative;
  z-index: 1;
}

.wish-bonus::before {
  content: "★";
  position: absolute;
  top: -10px;
  right: -10px;
  color: white;
  font-size: 20px;
  text-shadow: 0 0 5px;
  animation: rotate-stars 3s linear infinite;
  transform-origin: center;
}
</style>